<template>
    <div class="footgo">
      <ul class="gootxin">
        <router-link to="./home">
          <li class="footli">
            <div class="footli_a">
              <img src="../assets/image/icon/nav/home/selected.png" alt="" />
            </div>
            <p>商城</p>
          </li>
        </router-link>
        <router-link to="./sort">
          <li class="footli">
            <div class="footli_a">
              <img src="../assets/image/icon/nav/home/selected.png" alt="" />
            </div>
            <p>分类</p>
          </li>
        </router-link>
        <router-link to="./cart">
          <li class="footli">
            <div class="footli_a">
              <img src="../assets/image/icon/nav/home/selected.png" alt="" />
            </div>
            <p>购物车</p>
          </li>
        </router-link>
        <router-link to="./usercenter">
          <li class="footli">
            <div class="footli_a">
              <img src="../assets/image/icon/nav/home/selected.png" alt="" />
            </div>
            <p>我的</p>
          </li>
        </router-link>
      </ul>
    </div>
</template>
<script>
export default {
  data() {
    return {
      guid:[
        {
          id:1,
          name:"商城",
          img:require('../assets/image/icon/nav/home/selected.png')
        },
        {
          id:2,
          name:"分类",
          img:require('../assets/image/icon/nav/home/selected.png')

        },
        {
          id:3,
          name:"购物车",
          img:require('../assets/image/icon/nav/home/selected.png')

        }, {
          id:4,
          name:"我的",
          img:require('../assets/image/icon/nav/home/selected.png')

        }, 
      ],
    };
  },
};
</script>
<style >

.footgo {
  width: 100%;
  position: fixed;
  bottom: 0;
  height: 0.83rem * 2;
  background: rgb(255, 255, 255);
  /* border-top: 1px solid #888; */
}
.gootxin {
    display: flex;
    justify-content: space-around;
  }
  .footli_a {
      width: 0.18rem * 2;
      height: 0.2rem * 2;
      /* background: rgb(182, 33, 33); */
      margin: 0.05rem auto;
    }
    .footli_a img{
            margin: 0.05rem auto;

    }
    p {
      text-align: center;
    }
    .footli {
    width: 0.4rem * 2;
    height: 0.4rem * 2;
    /* background: rgb(100, 107, 89); */
    overflow: hidden;
    margin-top: 0.2rem;
    
    
  }
</style>